<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-card animate__animated animate__fadeIn">
			<view class="banner">
				<image class="img" src="/static/images/banner2.jpg" mode="aspectFill"></image>
				<image
					class="close"
					@click="router.back()"
					src="/static/images/iconclose.png"
					mode="aspectFill"
				></image>
				<view class="info flex align-center">
					<image class="avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
					{{ cache.lang == "zh" ? "用户" : "User" }}
				</view>
			</view>
			<view class="content">
				<view class="qrcode mb30 flex flex-center">
					<image class="img" src="/static/images/qrcode.jpg" mode="aspectFill"></image>
				</view>
				<view class="carinfo mb30">
					<view class="header flex align-center">
						<view class="icon">{{ $t("driving.dicon") }}</view>
						<view class="title">{{ $t("driving.license") }}</view>
					</view>
					<view class="photo flex flex-between align-center">
						<view class="info">
							<image
								class="img"
								src="/static/images/banner1.jpg"
								mode="aspectFill"
							></image>
							<view class="text">{{ $t("driving.home") }}</view>
						</view>
						<view class="info">
							<image
								class="img"
								src="/static/images/banner2.jpg"
								mode="aspectFill"
							></image>
							<view class="text">{{ $t("driving.second") }}</view>
						</view>
					</view>
				</view>
				<view class="carinfo mb30">
					<view class="header flex align-center">
						<view class="icon">{{ $t("driving.dicon") }}</view>
						<view class="title">{{ $t("driving.dz") }}</view>
					</view>
					<view class="cardinfo">
						<view class="mb40">
							<view class="t1">{{ $t("driving.num") }}</view>
							<view class="t2">110102 19880520 9898</view>
						</view>
						<view class="mb40 flex align-center">
							<view class="flex50">
								<view class="t1">{{ $t("driving.name") }}</view>
								<view class="t2">{{ cache.lang == "zh" ? "用户" : "User" }}</view>
							</view>
							<view class="flex50">
								<view class="t1">{{ $t("driving.type") }}</view>
								<view class="t2">C1</view>
							</view>
						</view>
						<view class="mb40 flex align-center">
							<view class="flex50">
								<view class="t1">{{ $t("driving.firstdate") }}</view>
								<view class="t2">2016-12-30</view>
							</view>
							<view class="flex50">
								<view class="t1">{{ $t("driving.yxdate") }}</view>
								<view class="t2">2016-12-30</view>
							</view>
						</view>
						<view class="mb40">
							<view class="t1">{{ $t("driving.yxq") }}</view>
							<view class="t2">{{ cache.lang == "zh" ? "6年" : "Six years" }}</view>
						</view>
						<view class="flex align-center footer">
							<view class="flex50"
								>{{ $t("driving.status") }}：{{
									cache.lang == "zh" ? "正常" : "Normal"
								}}</view
							>
							<view class="flex50"
								>{{ $t("driving.val") }}：4{{
									cache.lang == "zh" ? "分" : "points"
								}}</view
							>
						</view>
					</view>
				</view>
				<view class="insurance">
					<view class="header flex align-center">
						<view class="icon" style="background-color: #2fc31c">{{
							$t("driving.aicon")
						}}</view>
						<view class="title">{{ $t("driving.alert") }}</view>
					</view>
					<view class="center flex flex-column flex-center">
						<view class="day flex flex-end"
							><view class="font">328</view
							>{{ cache.lang == "zh" ? "天" : "Day" }}</view
						>
						<view class="date">
							{{ $t("driving.changedate") }}：{{
								cache.lang == "zh" ? "2019-11-08前" : "2019-11-08"
							}}
						</view>
						<view class="text"> {{ $t("driving.text") }} </view>
					</view>
				</view>
			</view>
			<Serve></Serve>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import Serve from "@/components/serve.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const index = ref(0);
const app = useApp();
const ui = useUi();
const banner = ref([{ url: "/static/images/banner1.jpg" }, { url: "/static/images/banner2.jpg" }]);
</script>

<style lang="scss" scoped>
.page-card {
	padding-bottom: 30rpx;
	.banner {
		width: 100%;
		height: 758rpx;
		position: relative;
		.img {
			width: 100%;
			height: 100%;
		}
		.info {
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border: 4rpx solid #fff;
				border-radius: 50%;
				margin-right: 30rpx;
			}
		}
		.close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 30rpx;
			top: 50rpx;
		}
	}
	.content {
		padding: 30rpx;
		.qrcode {
			width: 100%;
			height: 690rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			.img {
				width: 432rpx;
				height: 432rpx;
			}
		}
		.header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			.icon {
				width: 60rpx;
				height: 60rpx;
				background: #0c81f7;
				border-radius: 50%;
				line-height: 60rpx;
				text-align: center;
				margin-right: 20rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
			}
			.title {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #333333;
			}
		}
		.carinfo {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.photo {
				padding: 30rpx 0;
				.info {
					width: 300rpx;
					height: 200rpx;
					border-radius: 20rpx;
					position: relative;
					overflow: hidden;
					.img {
						width: 100%;
						height: 100%;
					}
					.text {
						width: 100%;
						height: 40rpx;
						background: rgba($color: #000000, $alpha: 0.5);
						text-align: center;
						line-height: 40rpx;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						position: absolute;
						left: 0;
						bottom: 0;
						color: #ffffff;
					}
				}
			}
			.cardinfo {
				padding: 30rpx 0;
				.t1 {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #aaaaaa;
				}
				.t2 {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					margin-top: 20rpx;
				}
				.footer {
					border-top: 1rpx solid #e5e5e5;
					padding-top: 30rpx;
				}
			}
		}
		.insurance {
			width: 100%;
			height: 500rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.center {
				.day {
					padding: 70rpx 0;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					.font {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 80rpx;
						color: #1284f7;
						line-height: 80rpx;
					}
				}
				.date {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
				.text {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #aaaaaa;
					margin-top: 60rpx;
				}
			}
		}
	}
}
</style>
